<template>
  <div class="app-container">
    <el-form ref="mainForm" size="medium" :model="formDataClone" :rules="rules" label-width="100px">
      <el-form-item label="设备名称" prop="name">
        <el-input v-model="formDataClone.name" placeholder="设备名称" clearable disabled />
      </el-form-item>
      <el-row>
        <el-col :span="12">
          <el-form-item label="风速通道" prop="wind_speed">
            <el-input v-model="formDataClone.wind_speed" placeholder="风速通道" clearable />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="间隔时间" prop="interv">
            <el-input v-model="formDataClone.interv" type="number" placeholder="间隔时间" clearable />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="温度通道" prop="temp_avg">
            <el-input v-model="formDataClone.temp_avg" placeholder="温度通道" clearable />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="湿度通道" prop="humidity">
            <el-input v-model="formDataClone.humidity" placeholder="湿度通道" clearable />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="雨量通道" prop="rainfall">
            <el-input v-model="formDataClone.rainfall" placeholder="雨量通道" clearable />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="雨量单位" prop="rainfall_unit">
            <el-input v-model="formDataClone.rainfall_unit" placeholder="雨量单位" clearable />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="辐射通道" prop="radiation">
            <el-input v-model="formDataClone.radiation" placeholder="辐射通道" clearable />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="辐射单位" prop="radiation_unit">
            <el-input v-model="formDataClone.radiation_unit" placeholder="辐射单位" clearable />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="压力通道" prop="pressure">
            <el-input v-model="formDataClone.pressure" placeholder="压力通道" clearable />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="压力单位" prop="pressure_unit">
            <el-input v-model="formDataClone.pressure_unit" placeholder="压力单位" clearable />
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item prop="name">
        <el-checkbox v-model="formDataClone.cacu_et0" :true-label="1" :false-label="0">计算ET0</el-checkbox>
        <el-checkbox v-model="formDataClone.cacu_temp_acc" :true-label="1" :false-label="0">计算积温</el-checkbox>
        <el-checkbox v-model="formDataClone.cacu_sunshine_acc" :true-label="1" :false-label="0">计算日照</el-checkbox>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submit('mainForm')">提交</el-button>
        <el-button @click="reset('mainForm')">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { getOne } from '@/api/weatherDef'
import { deepClone } from '@/utils'
export default {
  props: {
    formData: {
      type: Object,
      default() {
        return {}
      }
    }
  },
  data() {
    return {
      rules: {},
      formDataClone: deepClone(this.formData)
    }
  },
  watch: {
    'formData.serialno': {
      handler(newVal, oldVal) {
        if (newVal.indexOf('0201.0007') > -1) {
          this.getOne(newVal)
        }
      },
      immediate: true,
      deep: true
    }
  },
  methods: {
    async getOne(serialno) {
      const { data } = await getOne(serialno)
      this.formDataClone = JSON.parse(JSON.stringify(Object.assign(this.formDataClone, data)))
    },
    submit() {
      const formData = this.formatFormData(this.formDataClone)
      this.$emit('submit', formData)
    },
    reset() {
      console.log('reset')
    },
    formatFormData(formData) {
      const attrs = ['serialno', 'interv', 'temp_avg', 'humidity', 'rainfall', 'rainfall_unit', 'radiation', 'radiation_unit', 'pressure', 'pressure_unit', 'wind_speed', 'cacu_et0', 'cacu_temp_acc', 'cacu_sunshine_acc']
      const res = {}
      attrs.forEach(item => {
        res[item] = formData[item] || ''
      })
      res['cacu_et0'] = +res['cacu_et0']
      res['cacu_temp_acc'] = +res['cacu_temp_acc']
      res['cacu_sunshine_acc'] = +res['cacu_sunshine_acc']
      return res
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
